<template>
  <div class="instorage-form-container">
    <a-card title="入库信息编辑" :bordered="false">
      <a-form ref="formRef" :model="formData" :rules="rules" layout="vertical" class="instorage-form">
        <a-row :gutter="[16, 16]">
          <!-- 状态 -->
          <a-col :span="8">
            <a-form-item name="status" label="状态">
              <a-select v-model:value="formData.status" placeholder="请选择状态">
                <a-select-option value="active">有效</a-select-option>
                <a-select-option value="inactive">无效</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <!-- 榜单日期 -->
          <a-col :span="8">
            <a-form-item name="listDate" label="榜单日期">
              <a-date-picker v-model:value="formData.listDate" placeholder="请选择日期" format="YYYY-MM-DD" />
            </a-form-item>
          </a-col>

          <!-- 填表日期 -->
          <a-col :span="8">
            <a-form-item name="fillDate" label="填表日期">
              <a-date-picker v-model:value="formData.fillDate" placeholder="请选择日期" format="YYYY-MM-DD" />
            </a-form-item>
          </a-col>

          <!-- 制造单元(供应商简称) -->
          <a-col :span="12">
            <a-form-item name="supplierName" label="制造单元(供应商简称)">
              <a-input v-model:value="formData.supplierName" placeholder="请输入供应商名称" />
            </a-form-item>
          </a-col>

          <!-- 市场简称 -->
          <a-col :span="6">
            <a-form-item name="marketName" label="市场简称">
              <a-input v-model:value="formData.marketName" placeholder="请输入市场简称" />
            </a-form-item>
          </a-col>

          <!-- 产品名称 -->
          <a-col :span="6">
            <a-form-item name="productName" label="产品名称">
              <a-input v-model:value="formData.productName" placeholder="请输入产品名称" />
            </a-form-item>
          </a-col>

          <!-- 磅单号 -->
          <a-col :span="8">
            <a-form-item name="weighingNumber" label="磅单号">
              <a-input v-model:value="formData.weighingNumber" placeholder="请输入磅单号" />
            </a-form-item>
          </a-col>

          <!-- 规格 -->
          <a-col :span="8">
            <a-form-item name="specification" label="规格">
              <a-input v-model:value="formData.specification" placeholder="请输入规格" />
            </a-form-item>
          </a-col>

          <!-- 重量 -->
          <a-col :span="8">
            <a-form-item name="weight" label="重量">
              <a-input-number v-model:value="formData.weight" placeholder="请输入重量" style="width: 100%" />
            </a-form-item>
          </a-col>

          <!-- 采购单价 -->
          <a-col :span="8">
            <a-form-item name="purchasePrice" label="采购单价">
              <a-input-number v-model:value="formData.purchasePrice" placeholder="请输入采购单价" style="width: 100%" precision="2" />
            </a-form-item>
          </a-col>

          <!-- 质扣金额 -->
          <a-col :span="8">
            <a-form-item name="deductAmount" label="质扣金额">
              <a-input-number v-model:value="formData.deductAmount" placeholder="请输入质扣金额" style="width: 100%" precision="2" />
            </a-form-item>
          </a-col>

          <!-- 采购金额 -->
          <a-col :span="8">
            <a-form-item name="purchaseAmount" label="采购金额">
              <a-input-number v-model:value="formData.purchaseAmount" placeholder="请输入采购金额" style="width: 100%" precision="2" />
            </a-form-item>
          </a-col>

          <!-- 原料市场 -->
          <a-col :span="8">
            <a-form-item name="materialMarket" label="原料市场">
              <a-input v-model:value="formData.materialMarket" placeholder="请输入原料市场" />
            </a-form-item>
          </a-col>

          <!-- 过磅人员 -->
          <a-col :span="8">
            <a-form-item name="weighingStaff" label="过磅人员">
              <a-input v-model:value="formData.weighingStaff" placeholder="请输入过磅人员" />
            </a-form-item>
          </a-col>

          <!-- 统计员 -->
          <a-col :span="8">
            <a-form-item name="statistician" label="统计员">
              <a-input v-model:value="formData.statistician" placeholder="请输入统计员" />
            </a-form-item>
          </a-col>

          <!-- 全流程 -->
          <a-col :span="8">
            <a-form-item name="fullProcess" label="全流程">
              <a-select v-model:value="formData.fullProcess" placeholder="请选择是否全流程">
                <a-select-option value="true">是</a-select-option>
                <a-select-option value="false">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <!-- 库号 -->
          <a-col :span="8">
            <a-form-item name="storageLocation" label="库号">
              <a-input v-model:value="formData.storageLocation" placeholder="请输入库号" />
            </a-form-item>
          </a-col>

          <!-- 车号 -->
          <a-col :span="8">
            <a-form-item name="vehicleNumber" label="车号">
              <a-input v-model:value="formData.vehicleNumber" placeholder="请输入车号" />
            </a-form-item>
          </a-col>

          <!-- 备注 -->
          <a-col :span="24">
            <a-form-item name="remarks" label="备注">
              <a-textarea v-model:value="formData.remarks" placeholder="请输入备注信息" :rows="3" />
            </a-form-item>
          </a-col>
        </a-row>

        <div class="form-footer">
          <a-button type="primary" @click="handleSubmit">保存</a-button>
          <a-button style="margin-left: 10px" @click="handleReset">重置</a-button>
        </div>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
defineOptions({ name: 'InstorageForm' })

const emit = defineEmits(['success'])

const formRef = ref(null)
// 表单数据
const formData = reactive({
  status: '',
  listDate: null,
  fillDate: null,
  supplierName: '',
  marketName: '',
  productName: '',
  weighingNumber: '',
  specification: '',
  weight: null,
  purchasePrice: null,
  deductAmount: null,
  purchaseAmount: null,
  materialMarket: '',
  weighingStaff: '',
  statistician: '',
  fullProcess: '',
  storageLocation: '',
  vehicleNumber: '',
  remarks: '',
})

// 验证规则
const rules = {
  listDate: [{ required: true, message: '请选择榜单日期', trigger: 'change' }],
  fillDate: [{ required: true, message: '请选择填表日期', trigger: 'change' }],
  supplierName: [{ required: true, message: '请输入制造单元(供应商简称)', trigger: 'blur' }],
  productName: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
  weighingNumber: [{ required: true, message: '请输入磅单号', trigger: 'blur' }],
  weight: [{ required: true, message: '请输入重量', trigger: 'blur' }],
  purchasePrice: [{ required: true, message: '请输入采购单价', trigger: 'blur' }],
}

// 提交表单
async function handleSubmit() {
  await formRef.value.validate()
  // 这里是提交逻辑，根据项目实际情况修改API地址
  await httpRequest('/admin/instorage/save', formData)
  message.success('保存成功')
  emit('success')
}

// 重置表单
function handleReset() {
  formRef.value.resetFields()
}

// 暴露方法供父组件使用
defineExpose({
  formRef,
  formData,
  handleSubmit,
  handleReset,
})
</script>

<style lang="less" scoped>
.instorage-form-container {
  min-height: 100%;
  padding: 20px;
  background-color: #fafafa;
}

.instorage-form {
  margin-top: 20px;
}

.form-footer {
  margin-top: 30px;
  text-align: right;
}
</style>
